<template>
  <section id="SystemMng-RoleMng-Page">
    <!--搜索部分-->
    <SearchCpn searchTitle="查询条件">
      <Button class="btn-reset" type="primary" @click="searchFun(1)"><Icon type="ios-search" class="icon-reset"/>查询</Button>
      <template slot="slot-ipt">
        <Form class="row-form" :modal="searchInfo">
          <Form-item label="角色名称" :label-width="labelWidth">
              <Input v-model="searchInfo.roleName" placeholder="请输入角色名称" clearable/>
          </Form-item>
        </Form>
      </template>
    </SearchCpn>
    <!--操作部分-->
    <SearchCpn searchTitle="数据操作">
      <Button class="btn-reset" @click="insertModalShow=true"><Icon type="ios-add" class="icon-reset"/>新增</Button>
      <Button class="btn-reset" @click="updateShowFun"><Icon type="ios-build" class="icon-reset"/>编辑</Button>
      <Button type="error" class="btn-reset" @click="deleteFun"><Icon type="md-trash" class="icon-reset"/>删除</Button>
    </SearchCpn>
    <TableCpn :columns="columns" :data="dataShow" :total="pageTool.total" :current="pageTool.pageNum" :page-size="pageTool.pageSize" @on-select-all="selectAllFun" @on-selection-change="selectionChangeFun" @on-change="changePageFun"></TableCpn>
    <!--新增弹框部分-->
    <Modal v-model="insertModalShow" title="新增资源" @on-ok="insertFun" width="50%">
      <div class="modal-item">
        <label>角色名称：</label>
        <Input class="modal-ipt-reset" v-model="insertInfo.roleName" placeholder="请输入角色名称" clearable/>
      </div>
      <div class="modal-item">
        <label>角色描述：</label>
        <Input type="textarea" class="modal-ipt-reset" v-model="insertInfo.roleDesc" placeholder="请输入角色描述" clearable/>
      </div>
      <div class="modal-item">
        <label>角色状态：</label>
        <Select class="modal-ipt-reset" v-model="insertInfo.status" clearable>
          <Option :value="0" :key="0">禁用</Option>
          <Option :value="1" :key="1">启用</Option>
        </Select>
      </div>
      <div class="modal-item">
        <label>可选资源：</label>
        <Tree :data="enableResourceList" ref="addResourceTree" show-checkbox multiple></Tree>
      </div>
    </Modal>
    <!--编辑弹框部分-->
    <Modal v-model="updateModalShow" title="编辑资源" @on-ok="updateFun" width="50%">
      <div class="modal-item">
        <label>角色名称：</label>
        <Input class="modal-ipt-reset" v-model="updateInfo.roleName" placeholder="请输入资源名称" clearable/>
      </div>
      <div class="modal-item">
        <label>角色描述：</label>
        <Input type="textarea" class="modal-ipt-reset" v-model="updateInfo.roleDesc" placeholder="请输入角色描述" clearable/>
      </div>
      <div class="modal-item">
        <label>角色状态：</label>
        <Select class="modal-ipt-reset" v-model="updateInfo.status" clearable>
          <Option :value="0" :key="0">禁用</Option>
          <Option :value="1" :key="1">启用</Option>
        </Select>
      </div>
      <div class="modal-item">
        <label>可选资源：</label>
        <Tree :data="enableCheckedResourceList" ref="updateResourceTree" show-checkbox multiple></Tree>
      </div>
    </Modal>
  </section>
</template>

<script>
import SearchCpn from '../../selfCpn/SearchCpn'
import TableCpn from '../../selfCpn/TableCpn'
import { selectEnableResourceTreeFun, selectEnableResourceTreeByRoleIdFun, roleMng_selectFun, roleMng_insertFun, roleMng_updateFun, roleMng_deleteFun } from '../../../api/apiFun'
export default {
  data () {
    return {
      labelWidth: 100,
      insertModalShow: false,
      updateModalShow: false,
      enableResourceList: [],
      enableCheckedResourceList: [],
      searchInfo: {
        roleName: ""
      },
      insertInfo: {
        roleName: "",
        roleDesc: "",
        status: ""
      },
      updateInfo: {
      },
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          title: "角色名称",
          key: "roleName",
          align: "center"
        },
        {
          title: "角色描述",
          key: "roleDesc",
          align: "center"
        },
        {
          title: "角色状态",
          key: "status",
          align: "center",
          render: (h, params) => {
            return h("span", {}, parseInt(params.row.status) === 1 ? "启用" : "禁用")
          }
        },
        {
          title: "更新人",
          key: "updateBy",
          align: "center"
        },
        {
          title: "更新时间",
          key: "updateDate",
          align: "center"
        }
      ],
      dataShow: [],
      selectedArr: [],
      pageTool: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  components: {
    SearchCpn,
    TableCpn
  },
  created () {
    this.doSelectEnableResourceTreeFun()
    this.searchFun(1)
  },
  methods: {
    // 查询所有启用资源tree
    doSelectEnableResourceTreeFun() {
      this.enableResourceList = []
      selectEnableResourceTreeFun().then((res) => {
        if(parseInt(res.code) === 0) {
          this.enableResourceList.push(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询fun
    searchFun(pageNum) {
      let params = JSON.parse(JSON.stringify(this.searchInfo))
      params.pageNum = pageNum
      params.pageSize = 10
      roleMng_selectFun(params).then((res) => {
        if(parseInt(res.code) === 0) {
          this.dataShow = res.data.list
          this.pageTool.total = res.data.total
          this.pageTool.pageNum = pageNum
          this.$Message.success("查询成功！")
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 新增fun
    insertFun() {
      let idsArr = []
      let selectSourceList = this.$refs.addResourceTree.getCheckedAndIndeterminateNodes()
      selectSourceList.map((item) => {
        if(item.checked) {
          idsArr.push(item.resourceId)
        }
      })
      let params = JSON.parse(JSON.stringify(this.insertInfo))
      params.resourceIds = idsArr.join(",")
      // ...
      roleMng_insertFun(params).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("新增成功！")
          this.searchFun(1)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 编辑回显fun
    updateShowFun() {
      if(this.selectedArr.length === 0) {
        this.$Message.warning("请选择需要删除的数据！")
        return false
      }
      if(this.selectedArr.length > 1) {
        this.$Message.warning("请选择1条数据进行编辑！")
        return false
      }
      this.enableCheckedResourceList = []
      let params = JSON.parse(JSON.stringify(this.selectedArr[0]))
      this.updateInfo = {
        roleId: params.roleId,
        roleName: params.roleName,
        roleDesc: params.roleDesc,
        status: params.status
      }
      // 查询已勾选的启用资源tree
      selectEnableResourceTreeByRoleIdFun({roleId: params.roleId}).then((res) => {
        if(parseInt(res.code) === 0) {
          this.enableCheckedResourceList.push(res.data)
        }
      }).catch(err => {
        console.log(err)
      })
      this.updateModalShow = true
    },
    // 编辑fun
    updateFun() {
      let idsArr = []
      let selectSourceList = this.$refs.updateResourceTree.getCheckedAndIndeterminateNodes()
      selectSourceList.map((item) => {
        if(item.checked) {
          idsArr.push(item.resourceId)
        }
      })
      let params = JSON.parse(JSON.stringify(this.updateInfo))
      params.resourceIds = idsArr.join(",")
      roleMng_updateFun(params).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("编辑成功！")
          this.searchFun(1)
          this.selectedArr = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除fun
    deleteFun() {
      let idsArr = []
      if(this.selectedArr.length === 0) {
        this.$Message.warning("请选择需要删除的数1据！")
        return false
      }
      idsArr = this.selectedArr.map((item) => {
        return item.roleId
      })
      roleMng_deleteFun({
        roleIds: idsArr.join(',')
      }).then((res) => {
        if(parseInt(res.code) === 0) {
          this.$Message.success("删除成功！")
          this.searchFun(1)
          this.selectedArr = []
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 全选fun
    selectAllFun(res) {
      this.selectedArr = res
    },
    // 选项改变
    selectionChangeFun(res) {
      this.selectedArr = res
    },
    // 改变页码fun
    changePageFun(res) {
      this.pageTool.pageNum = res
    }
  }
}
</script>

<style lang="less" scoped>
  #SystemMng-RoleMng-Page {
    width: 100%;
  }
  .modal-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px;
    label {
      width: 15%;
    }
    .modal-ipt-reset {
      width: 50%;
    }
  }
</style>
